<template>
    <div class="MakeBill">
        <h2>诊断管理</h2>
        <div class="head">
            <el-button @click="back" size="mini" type="info" class="el-icon-back">
                返回
            </el-button>

        </div>
        <el-form :label-position="labelPosition" label-width="80px" :model="form"
            style="text-align: left;margin-left: 10px;padding-bottom: 10px;" ref="form" :rules="rules">
            <el-form-item prop="type" label="类型"
                style="font-weight: bolder;display: inline-block;width: 600px;margin-right: 30px;">
                <el-select v-model="form.type" placeholder="请选择类型" style="width: 600px;">
                    <el-option label="门诊" value="0"></el-option>
                    <el-option label="住院" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="status" label="状态" style="font-weight: bolder;display: inline-block;width: 600px;">
                <el-select v-model="form.status" placeholder="请选择状态" style="width: 600px;">
                    <el-option label="新开单" value="0"></el-option>
                    <el-option label="进行中" value="1"></el-option>
                    <el-option label="已完成" value="2"></el-option>
                    <el-option label="已暂停" value="3"></el-option>
                    <el-option label="已取消" value="4"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="编号" style="font-weight: bolder;display: inline-block;width: 600px;margin-right: 30px;">
                <el-input v-model="form.clinicNumber"></el-input>
            </el-form-item>
            <el-form-item label="标题" style="font-weight: bolder;display: inline-block;width: 600px;">
                <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="诊断" style="font-weight: bolder;display: inline-block;width: 600px;margin-right: 30px;">
                <el-input type="textarea" :rows="9" v-model="form.diagnosisText"></el-input>
            </el-form-item>
            <el-form-item prop="patientId" label="患者" style="font-weight: bolder;display: inline-block;width: 600px;">
                <el-input placeholder="查找..." readonly v-model="patientName">
                    <el-button @click="searchPatient_Follow" type="success" slot="suffix" size='mini'>
                        <i class="el-icon-search">查找</i>
                    </el-button>
                </el-input>
            </el-form-item>

            <hr style="margin: 10px 10px;border: 1px solid black;">

            <el-form-item prop="depId" label="会诊科室"
                style="font-weight: bolder;display: inline-block;width: 600px;margin-right: 30px;">
                <el-select v-model="form.depId" placeholder="请选择科室" style="width: 600px;" @focus="getDepartment">
                    <el-option v-for="item in depData" :value="item.depId" :label="item.depName" :key="item.depId">
                    </el-option>
                    <!-- <el-option label="内科" value="1"></el-option>
                    <el-option label="呼吸内科" value="2"></el-option>
                    <el-option label="消化内科" value="3"></el-option>
                    <el-option label="血液内科" value="4"></el-option>
                    <el-option label="外科" value="5"></el-option>
                    <el-option label="骨外科" value="6"></el-option>
                    <el-option label="妇科" value="7"></el-option>
                    <el-option label="妇产科" value="8"></el-option>
                    <el-option label="儿科" value="9"></el-option> -->
                </el-select>
            </el-form-item>
            <el-form-item label="住院床号" style="font-weight: bolder;display: inline-block;width: 600px;">
                <el-input v-model="form.bedNumber"></el-input>
            </el-form-item>
            <el-form-item label="挂号费" style="font-weight: bolder;display: inline-block;width: 600px;margin-right: 30px;">
                <el-input v-model="form.registrationFees"></el-input>
            </el-form-item>
            <el-form-item label="附加费" style="font-weight: bolder;display: inline-block;width: 600px;">
                <el-input v-model="form.additionalFees"></el-input>
            </el-form-item>
            <el-form-item label="付款日期"
                style="font-weight: bolder;display: inline-block;width: 600px;margin-right: 30px;margin-top: -50px;">
                <el-date-picker type="datetime" placeholder="选择日期时间" v-model="form.createTime"
                    :picker-options="pickerOptions" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="是否付款" style="font-weight: bolder;display: inline-block;width: 600px;">
                <input type="checkbox" v-model="form.isPaid" @click="my_isPaid" style="width: 20px;height: 20px;">
            </el-form-item>
            <el-form-item>
                <el-button @click="submit('form')" type="primary">保存</el-button>
                <el-button @click="resetForm('form')">取消</el-button>
            </el-form-item>


        </el-form>


        <el-dialog width="60%" title="" :visible.sync="dialogTableVisible">
            <div class="head2">
                <div class="my_btn">
                    <h2>查找患者</h2>
                    <el-button @click="deletePatient" size="mini" type="danger" class="el-icon-brush">
                        擦除
                    </el-button>
                </div>
                <div class="search">
                    <el-input placeholder="查找..." v-model="searchContent" class="input-with-select">
                        <el-button @click="my_search" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </div>

            <el-table :data="patientData">
                <el-table-column property="type" label="类型" width="auto">
                    <template slot-scope="scope">
                        <div v-if="scope.row.type == 0">私海</div>
                        <div v-if="scope.row.type == 1">公海</div>
                    </template>
                </el-table-column>
                <el-table-column property="name" label="患者姓名" width="auto"></el-table-column>
                <el-table-column property="sex" label="性别" width="auto">
                    <template slot-scope="scope">
                        <div v-if="scope.row.sex == 0">女</div>
                        <div v-if="scope.row.sex == 1">男</div>
                    </template>
                </el-table-column>
                <el-table-column property="age" label="年龄" width="auto"></el-table-column>
                <el-table-column property="phone" label="手机号码" width="auto"></el-table-column>
                <el-table-column property="idCard" label="身份证号" width="auto"></el-table-column>
                <el-table-column property="contact" label="负责人" width="auto"></el-table-column>
                <el-table-column property="status" label="状态" width="auto">
                    <template slot-scope="scope">
                        <el-tag disable-transitions type="success" v-if="scope.row.status == 0">
                            有效
                        </el-tag>
                        <el-tag disable-transitions type="info" v-if="scope.row.status == 1">
                            无效
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center" width="180">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" class="el-icon-plus" @click="selectPatient(scope.row)">
                            选择该患者
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination @getPagination="getPagination" :total="total"></Pagination>

        </el-dialog>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import Pagination from '@/components/Pagination'
export default {
    name: 'MakeBill',
    components: {
        Pagination,
    },
    computed: {
        ...mapState("editPatient", ['title', 'rowData'])
    },
    data() {
        return {
            labelPosition: 'top',
            patientName: '',

            searchContent: '',
            form: {
                "type": '',//类型
                "status": '',//状态0-4
                "clinicNumber": "",//编号
                "title": "",//标题
                "diagnosisText": "",//诊断信息
                "patientId": '',//患者id
                "depId": '',//会诊科室
                "bedNumber": "",//住院床号
                "registrationFees": '',//挂号费
                "additionalFees": '',//附加费
                "createTime": "",//创建时间付款日期----真
                "isPaid": false,//是否付款
            },
            patientData: [//患者信息
                {
                    id: '',
                    type: '',//类型0私海1公海
                    name: '',//患者名称
                    sex: '',//性别0女1男
                    age: '',//年龄
                    phone: '',//手机号码
                    idCard: '',//身份证号
                    contact: '',//负责人
                    status: '',//状态0有效1无效
                },
            ],
            pickerOptions: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },

            //部门信息
            depData: {
                depId: "",
                depName: "",
                depPho: "",
            },

            rules: {
                type: [
                    { required: true, message: '请选择类型', trigger: ['blur', 'change'] }

                ],
                status: [
                    { required: true, message: '请选择状态', trigger: ['blur', 'change'] },

                ],
                depId: [
                    { required: true, message: '请选择部门', trigger: ['blur', 'change'] },
                ],
                patientId: [
                    { required: true, message: '请选择患者', trigger: ['blur'] },
                ],
            },

            dialogTableVisible: false,

            currentPage: 1,
            pageSize: 10,
            total: 0,

            a: '',

        }
    },
    mounted() {
        console.log("this.rowData---", this.rowData);
        this.patientName = this.rowData.name
        this.form.patientId = this.rowData.id
    },
    created(){
        this.form.clinicNumber=Date.now()
    },
    methods: {
        back() {//返回到诊断管理
            this.$router.push('/diagnosis/diaManage')
        },

        //查看患者列表
        async getAllPatientsList(currentPage, pageSize) {

            let res = await this.$api.patients.getPatientsList({ currentPage, pageSize })

            if (res.data.code === 200) {

                this.patientData = res.data.data.list;
                console.log(res.data.data.list);
                //总数
                this.total = res.data.data.total;
                //加载loading
                this.loading = false;

                this.a = "所有";

            } else {
                console.log('请求失败');
                this.patientData = [];
                this.pageSize = 0;
                this.total = 1;
                this.a = "";
            }
        },

        //查看患者功能
        searchPatient_Follow() {
            this.dialogTableVisible = true;
            this.getAllPatientsList(this.currentPage, this.pageSize)
        },

        deletePatient() {//擦除
            this.patientName = '';
            this.form.patientId = '';
            // this.dialogTableVisible = false;
        },

        //搜索患者
        async my_search(name, currentPage, pageSize) {
            name = this.searchContent;
            currentPage = this.currentPage;
            pageSize = this.pageSize
            let res = await this.$api.patients.searchPatient(name, currentPage, pageSize)
            if (res.data.code === 200) {
                console.log(res.data.data.list);
                this.patientData = res.data.data.list
                //总数
                this.total = res.data.data.total;
                this.a = "普搜"
            } else {
                console.log('请求失败');
                this.a = "",
                    this.patientData = [];
                this.pageSize = 0;
                this.total = 1;
            }
        },

        //选择患者
        selectPatient(row) {
            this.patientName = row.name;
            this.form.patientId = row.id
            this.dialogTableVisible = false;
        },

        //获取页码
        getPagination(page) {
            this.currentPage = page;
            if (this.a == "所有") {
                this.getAllPatientsList(this.currentPage, this.pageSize)
            } else {
                this.my_search(this.searchContent, this.currentPage, this.pageSize)
            }

        },
        //是否付款
        my_isPaid() {
            if (this.form.isPaid == false) {
                this.form.isPaid = Number(1)
            } else if (this.form.isPaid == Number(1)) {
                this.form.isPaid = Number(0)
            }
            console.log(this.form.isPaid);
        },

        //获取部门
        async getDepartment() {
            this.form.depId = "";
            this.dialogFormVisible = true;
            let res = await this.$api.patients.getPaDepartment()
            if (res.data.code === 200) {
                this.depData = res.data.data
                // console.log( this.depData);
            }
        },
        //保存提交
        submit(form) {
            this.$refs[form].validate((valid) => {
                if (valid) {
                    if (this.form.isPaid == true) {
                        this.form.isPaid = Number(1)
                    } else if (this.form.isPaid == false) {
                        this.form.isPaid = Number(0)
                    }
                
                    this.$axios({
                        method: 'post',
                        url: '/diagnosis/diagnosisManagement/addDiagnosis',
                        data: this.form,

                    }).then(resp => {
                        // console.log(resp.data);
                        this.$router.push('/diagnosis/diaManage')
                        //提示
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                    }).catch(() => {
                        this.$message.error('添加失败');
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })

        },

        //取消按钮
        resetForm(form) {
            //跳转到列表页面
            this.$router.push('/diagnosis/diaManage')
            this.$refs[form].resetFields();
        },
    },

}
</script>

<style lang="less" scoped>
h2 {
    text-align: left;
    margin: 10px;
}

.head {
    display: flex;
    margin: 5px;
    padding: 10px;
    height: 30px;
    border-top: 5px solid gainsboro;
    border-radius: 5px;
    background-color: white;
}

.head2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px;
    padding: 10px;
    height: 30px;
    border-top: 5px solid gainsboro;
    border-radius: 5px;
    background-color: white;
}

.my_btn {
    float: left;
    display: flex;
    align-items: center;
}

.search {
    float: right;
}

.my_search {
    padding: 5px;
}
</style>